<!-- 店铺管理 -->
<template>
    <div>
        <Title title="店铺管理">
            <el-button type="primary" @click="saveShopInfo">保存店铺信息</el-button>
        </Title>
        <div v-if="formData" style="margin-top: 20px;">
            <el-form :model="formData" label-width="auto">
                <el-form-item label="店铺名称">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item label="店铺公告">
                    <el-input v-model="formData.bulletin" type="textarea"  rows="4"/>
                </el-form-item>

                <el-form-item label="店铺头像">
                    <el-upload class="avatar-uploader"
                        :action="'/poo'+'/shop/upload'" :show-file-list="false"
                        :on-success="handleAvatarSuccess"  :before-upload="beforeAvatarUpload">
                        <img v-if="formData.avatar" :src="baseUrl + formData.avatar" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>


                <el-form-item label="店铺图片">
                    <el-upload :file-list="picsList" :action="'/poo'+'/shop/upload'" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleListSuccess">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>

                <el-form-item label="起送价格">
                    <el-input-number v-model="formData.minPrice" class="mx-4" :min="1" controls-position="right"
                        @mouseenter="showIcon[0] = true" @mouseleave="showIcon[0] = false">
                        <template #increase-icon>
                            <el-icon v-show="showIcon[0]">
                                <CaretTop />
                            </el-icon>
                        </template>
                        <template #decrease-icon>
                            <el-icon v-show="showIcon[0]">
                                <CaretBottom />
                            </el-icon>
                        </template>
                    </el-input-number>
                </el-form-item>

                <el-form-item label="送达时间">
                    <el-input-number v-model="formData.deliveryTime" class="mx-4" :min="1" controls-position="right"
                        @mouseenter="showIcon[1] = true" @mouseleave="showIcon[1] = false">
                        <template #increase-icon>
                            <el-icon v-show="showIcon[1]">
                                <CaretTop />
                            </el-icon>
                        </template>
                        <template #decrease-icon>
                            <el-icon v-show="showIcon[1]">
                                <CaretBottom />
                            </el-icon>
                        </template>
                    </el-input-number>
                </el-form-item>

                <el-form-item label="配送描述">
                    <el-input v-model="formData.description"></el-input>
                </el-form-item>

                <el-form-item label="店铺好评率">
                    <el-input-number v-model="formData.score" class="mx-4" :min="1" controls-position="right"
                        @mouseenter="showIcon[2] = true" @mouseleave="showIcon[2] = false">
                        <template #increase-icon>
                            <el-icon v-show="showIcon[2]">
                                <CaretTop />
                            </el-icon>
                        </template>
                        <template #decrease-icon>
                            <el-icon v-show="showIcon[2]">
                                <CaretBottom />
                            </el-icon>
                        </template>
                    </el-input-number>
                </el-form-item>

                <el-form-item label="店铺销量">
                    <el-input-number v-model="formData.sellCount" class="mx-4" :min="1" controls-position="right"
                        @mouseenter="showIcon[3] = true" @mouseleave="showIcon[3] = false">
                        <template #increase-icon>
                            <el-icon v-show="showIcon[3]">
                                <CaretTop />
                            </el-icon>
                        </template>
                        <template #decrease-icon>
                            <el-icon v-show="showIcon[3]">
                                <CaretBottom />
                            </el-icon>
                        </template>
                    </el-input-number>

                </el-form-item>

                <!-- 多选框 -->
                <el-form-item label="活动支持">
                    <el-checkbox-group v-model="formData.supports">
                        <el-checkbox value="单人精彩套餐" name="type">
                            单人精彩套餐
                        </el-checkbox>
                        <el-checkbox value="VC无限橙果汁全场8折" name="type">
                            VC无限橙果汁全场8折
                        </el-checkbox>
                        <el-checkbox value="在线支付满28-5" name="type">
                            在线支付满28-5
                        </el-checkbox>
                        <el-checkbox value="特价饮品八折抢购" name="type">
                            特价饮品八折抢购
                        </el-checkbox>
                        <el-checkbox value="中秋特惠" name="type">
                            中秋特惠
                        </el-checkbox>
                        <el-checkbox value="国庆特价" name="type">
                            国庆特价
                        </el-checkbox>
                        <el-checkbox value="春节1折折扣" name="type">
                            春节1折折扣
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>


                <!-- 营业时间 -->
                <el-form-item label="营业时间" style="width: 350px;">
                    <el-time-picker v-model="formData.date" is-range range-separator="To" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!-- 图片列表弹窗 -->
    <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
</template>

<script setup>
import Title from '@/views/home/component/Title.vue';
import { ref } from 'vue'
import { getShopDetail, saveShop } from '@/api/shop.js'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { baseUrl } from "@/utile/commen.js"
const showIcon = ref([false, false, false, false]);

// 店铺详情
const formData = ref({
    id:null,
    name: '',
    bulletin:'',
    avatar:'',
    deliveryPrice:null,
    deliveryTime:null,
    description:'',
    score:'',
    sellCount:null,
    supports:[],
    pics:[],
    date:[],
    minPrice:''
}) //表单数据
const dialogImageUrl = ref('')//弹窗显示路径
const dialogVisible = ref(false)
let picsList = ref([]); //图片列表

//获取店铺详情
const shopDetail = async () => {
    const res = await getShopDetail();
    formData.value = res.data;
    // 对图片列表处理
    picsList.value = res.data.pics.map(item => {
        return {name:item,url:baseUrl+item}
    })
}
shopDetail();

//保存店铺信息
const saveShopInfo = async () => {
    const eidtFrom = {...formData.value};
    //店铺头像处理
    eidtFrom.avatar = eidtFrom.avatar.slice(eidtFrom.avatar.lastIndexOf('/') + 1);
    //图片列表处理
    const pics = [];
    picsList.value.forEach(item=>{
        console.log(item);
        let fileStr = item.name;
        if(item.response){
            console.log(1);
            fileStr = item.response.imgUrl;
        }
        pics.push(fileStr.slice(fileStr.lastIndexOf('/')+1));
    })
    eidtFrom.pics = JSON.stringify(pics);
    //多选框处理 专json
    eidtFrom.supports = JSON.stringify(eidtFrom.supports);
    // 日期处理 转json
    eidtFrom.date = JSON.stringify(eidtFrom.date);
    console.log(eidtFrom);
    // 调用保存接口
    const res = await saveShop(eidtFrom);
    if (res.code === 0) {
        ElMessage.success('保存成功');
        //刷新
        shopDetail();
    } else {
        ElMessage.error('保存失败');
    }
}


//删除图片
const handleRemove = (uploadFile, uploadFiles) => {
    //修改formData.pics
    picsList.value = uploadFiles
    // console.log(uploadFile, uploadFiles)
}
//预览图片
const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
}
const beforeAvatarUpload= (rawFile) => {
  if (!rawFile.type.includes('image')) {
    ElMessage.error('必须上传图片!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片不要超过2MB!')
    return false
  }
  return true
}
const handleAvatarSuccess = (response, uploadFile) => {
    //修改formData.avatar
    formData.value.avatar = response.imgUrl
}
const handleListSuccess = (response, uploadFile, uploadFiles) => {
    console.log(response, uploadFile, uploadFiles)
    //修改formData.pics
    picsList.value = uploadFiles
}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.demo-range .el-date-editor {
    margin: 8px;
}

.demo-range .el-range-separator {
    box-sizing: content-box;
}

.avatar {
    width: 178px;
    height: 178px;
}

:deep(.el-form-item) {
    display: flex
}

.mx-4 {
    width: 100%;
    text-align: left;
}

:deep(.el-input-number .el-input__inner) {
    text-align: left;
    border: none;
}

:deep(.el-input-number__decrease) {
    background: white;
}

:deep(.el-input-number__increase) {
    align-items: center;
    background: white;
    bottom: 1px;
    color: var(--el-text-color-regular);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    height: auto;
    justify-content: center;
    position: absolute;
    top: 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 32px;
    z-index: 1;
}

:deep(.el-input-number.is-controls-right .el-input-number__increase) {
    border-bottom: none;
    border-left: none;
}

:deep(.el-input-number.is-controls-right .el-input-number__decrease) {
    border-left: none;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

/* :deep(.el-form-item){
    height: 40px;
}
:deep(.el-input ){
    --el-input-inner-height: calc(var(--el-input-height, 50px) - 2px);
} */
</style>